<template>
  <div>
    <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="financeData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <i style="cursor: pointer" @click="goBack" class="el-icon-arrow-left" v-show="financeData.origin"></i>
          <span>详情</span>
        </div>
      <el-row v-loading="loading" style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            status-icon
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 0 40px">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="资料" name="info">
                  <!-- <el-col :span="24" style="background: #fafafa;padding:25px;">
                    <el-row>
                      <el-col :span="6" style="text-align: center">
                        <el-progress type="circle" :percentage="100"></el-progress>
                        <p style="color:#645454;font-size:12px">回款进度</p>
                        <p style="color:#645454;font-size:12px;margin-top:4px;">6800/6800</p>
                      </el-col>
                      <el-col :span="18">
                        <el-row>
                          <el-col style="margin-bottom:28px" :span="24" v-for="item in 2" :key="item">
                            <el-row type="flex" :gutter="10">
                              <el-col style="width:100px">
                                <el-tooltip class="item" effect="dark" content="代理记账" placement="top">
                                   <p class="ellisps link-ellisps" >代理记账</p>
                                </el-tooltip>
                                <p style="color:#000;font-size:13px">执行中</p>
                              </el-col>
                              <el-col>
                                <el-row type="flex" style="margin-top:8px" :gutter="2">
                                  <el-col v-for="item in 10" :key="item">
                                    <p style="height:4px;background:#00ce8f"></p>
                                  </el-col>
                                </el-row>
                              </el-col>
                            </el-row>
                          </el-col>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col> -->
                  <el-col :span="24">
                    <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                      <a-collapse-panel class="marginB10" header="基础信息" key="1">
                        <el-row :gutter="10">
                          <el-col :span="24">
                            <el-form-item label="客户名称:">
                              <el-link type="primary" :underline="false">{{parames.customerName}}</el-link>
                            </el-form-item>
                          </el-col>
                          <!-- <el-col :span="12">
                            <el-form-item label="联系人:">
                              <p>{{parames.contacts}}</p>
                            </el-form-item>
                          </el-col> -->
                          <el-col :span="12">
                            <el-form-item label="状态:">
                              <p v-if="parames.paymentStatus">{{parames.paymentStatus.desc}}</p>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </a-collapse-panel>
                    </a-collapse>
                  </el-col>
                </el-tab-pane>
                <el-tab-pane label="收支" name="kaipiao">
                  <div class="kaipiao-box">
                    <span class="kaipiao-box-left"></span>
                    <span class="kaipiao-box-right"></span>
                    <el-col :span="20">
                      <el-row type="flex" :gutter="24">
                        <el-col class="kaipiao-xu">
                          <p>服务金额</p>
                          <p class="jine-top">{{parames.serviceAmount}}</p>
                        </el-col>
                        <el-col class="kaipiao-xu">
                          <p>违约金</p>
                          <p class="jine-top">{{parames.liquidatedDamagesAmount}}</p>
                        </el-col> 
                        <el-col class="kaipiao-xu">
                          <p>实收</p>
                          <p class="jine-top">{{parames.receiptedAmount}}</p>
                        </el-col> 
                        <el-col class="kaipiao-xu">
                          <p>消耗</p>
                          <p class="jine-top">{{parames.consumptionAmount}}</p>
                        </el-col> 
                        <el-col class="kaipiao-xu">
                          <p>支出</p>
                          <p class="jine-top">{{parames.expenditureAmount}}</p>
                        </el-col> 
                        <el-col class="kaipiao-xu">
                          <p>退款</p>
                          <p class="jine-top">{{parames.refundAmount}}</p>
                        </el-col> 
                      </el-row>
                    </el-col>
                  </div>
                  <div class="kaipiao-box-bottom"></div>
                  <el-table :data="tableData" style="width: 100%" show-summary>
                    <el-table-column prop="name" fixed label="类型" width="180"></el-table-column>
                    <el-table-column prop="address" label="金额"></el-table-column>
                    <el-table-column prop="address" label="状态"></el-table-column>
                    <el-table-column prop="address" label="创建时间"></el-table-column>
                    <el-table-column prop="address" label="操作"></el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="动态" name="dongtai">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="24">
                                <el-button :type="dongtaiShow?'primary':'text'" size="mini" round @click="dongtaiShow = true">跟进动态</el-button>
                                <el-button size="mini" :type="!dongtaiShow?'primary':'text'" round @click="dongtaiShow = false">操作历史</el-button>
                            </el-col>
                            <el-col :span="24" style="margin-top:30px" v-show="dongtaiShow">
                                <!-- for循环记录 -->
                                <el-row type="flex" style="margin-bottom: 20px" v-for="(item,index) in trendsList" :key="index">  
                                    <el-col style="width: 40px">
                                        <el-avatar size="small">{{item.name}}</el-avatar>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row>
                                            <el-col :span="24">
                                                <p style="font-size:13px;color:#646464l">
                                                    <span style="color: #bfbfbf">{{item.createBy}}</span>
                                                    <span>添加了</span>
                                                    <span style="color: #bfbfbf" v-if="item.typeEnum">{{item.typeEnum.desc}}</span>
                                                    <span style="color: #bfbfbf">{{item.createDate | formatDate2}}</span>
                                                </p>
                                            </el-col>
                                            <el-col :span="24" style="margin-top:10px;">
                                                <p class="genjin-text">{{item.content}}</p>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <!-- 记录 -->
                            <el-col :span="24" style="margin-top:30px" v-show="!dongtaiShow">
                                <el-row type="flex" style="margin-bottom: 20px" v-for="(item,index) in origanList" :key="index">  
                                    <el-col style="width: 20px">
                                        <i class="el-icon-edit" style="color:#bfbfbf;font-size:12px;"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row>
                                            <el-col :span="24">
                                                <p style="font-size:13px;color:#646464l">
                                                    <span style="color: #bfbfbf">{{item.operator}}</span>
                                                    <span v-if="item.operationType">{{item.operationType.desc}}</span>
                                                    <span style="color: #bfbfbf">{{item.createDate | formatDate2}}</span>
                                                </p>
                                            </el-col>
                                            <el-col :span="24" style="margin-top:10px;" v-if="item.operationContent">
                                                <p class="genjin-text2">{{item.operationContent}}</p>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div style="margin-bottom: 20px">
              <!-- <el-button
                size="small"
                icon="el-icon-document-add"
                style="width:200px;text-align: left;margin-bottom:10px"
              >打印合同</el-button> -->
              
              <!-- <el-button
                size="small"
                icon="el-icon-takeaway-box"
                style="width:200px;text-align: left;margin-bottom:10px;margin-left: 0"
              >申请开票</el-button> -->
              <!-- <el-popover
                placement="bottom"
                width="200"
                trigger="hover"
                >
                <el-row>
                    <el-col @click.native="handleEdit">
                        <div class="drp-text">
                            <i class="el-icon-edit"></i>
                            <span>编辑合同</span>
                        </div>
                    </el-col>
                    <el-col @click.native="handleFly" v-if="parames.contractStatus && (parames.contractStatus.name == 'PENDING' || parames.contractStatus.name == 'PROCESSING')"> 
                        <div class="drp-text">
                            <i class="el-icon-switch-button"></i>
                            <span>作废合同</span>
                        </div>
                    </el-col>
                </el-row>
                <el-button size="small"  slot="reference" style="width:200px;text-align: left">
                    <i class="el-icon-menu"></i>
                    <span>更多操作</span>
                    <i style="float: right" class="el-icon-arrow-down"></i>
                </el-button>
              </el-popover> -->
            </div>
            <!-- <p class="formtitle" v-if="parames.userIdList">团队成员（{{parames.userIdList.length}}）人</p> -->
            <!-- <el-row style="margin-top: 10px">
              <span v-for="(item,index) in parames.userIdList" :key="index">
                  <el-col style="margin-bottom:10px" v-if="index==0" >
                    <span class="team-icon" style="background: #409efe" v-if="item.userName">{{item.userName.slice(0,1)}}</span>
                    <span class="team-name">{{item.userName}}</span>
                  </el-col>
                  <el-col style="margin-bottom:10px" v-if="index>0" >
                    <span class="team-icon" style="background: #409efe" v-if="item.userName">{{item.userName.slice(0,1)}}</span>
                    <span class="team-name">{{item.userName}}</span>
                    <i class="el-icon-delete team-del" @click="handleDeleteUser(index,item)"></i>
                  </el-col>
                </span>
            </el-row> -->
            <!-- <el-button type="text" style="margin-top:14px" @click="handleAddTeam" icon="el-icon-plus">添加新成员</el-button> -->
          </div>
        </el-col>
      </el-row>

      <div class="detail-from-bottom-box" :class="{height56: !isFabu, height200:isFabu}">
          <el-row type="flex" v-show="!isFabu">
              <el-col style="width:40px;">
                <el-avatar size="small" icon="el-icon-user-solid" style="margin-top:12px"></el-avatar>
              </el-col>
              <el-col :span="24">
                  <el-input type="text" placeholder="添加动态..." size="small" @focus="isFabu = true"></el-input>
              </el-col>
          </el-row>
          <el-row type="flex" v-if="isFabu">
              <el-col style="width:40px;">
                <el-avatar size="small" style="margin-top:12px" icon="el-icon-user-solid"></el-avatar>
              </el-col>
              <el-col :span="24">
                  <el-row>
                      <el-col :span="24">
                          <el-tag style="margin-right:5px;cursor:pointer" size="small" @click="typeEnum = item.name" v-for="(item,index) in trendsTypeData"  :key="index" :type="typeEnum==item.name?'':'info'">{{item.desc}}</el-tag>
                      </el-col>
                      <el-col :span="24">
                          <el-select size="small" v-model="trendsReasonId" placeholder="请选择动态原因" @change="changTrends">
                            <el-option v-for="(item,index) in trendsData" :key="index" :label="item.trendsReasonName" :value="item.id"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="24">
                          <el-input v-model="content" type="textarea" placeholder="添加动态..." resize="none"></el-input>
                      </el-col>
                      <el-col :span="18" style="text-align:right">
                          <el-button size="small" type="primary" @click="handleFabu" :loading="floading">发布</el-button>
                          <el-button size="small" @click="isFabu = false">取消</el-button>
                      </el-col>
                  </el-row>
              </el-col>
          </el-row>
      </div>
    </a-drawer>
    <!-- <createdContractDialog :dialogData="dialogData" @checkOpen="checkOpen"></createdContractDialog> -->
    <!-- <teamDialog :teamData="teamData" @selectUser="selectUser"></teamDialog> -->

  </div>
</template>

<script>
// import createdContractDialog from "./createdContractDialog.vue"; //新建合同

export default {
  props: ["financeData"],
  data() {
    return {
      floading: false,
      dongtaiShow: true,
      loading: false,
      isFabu: false, //是否打开下面的输入跟踪信息
      parames: {
        contractStatus: {
          desc: ''
        }
      },
      dialogData: { //新建弹窗
        id: '',
        type: '',
        show: false
      },
      teamData: {
        show: false
      },
      typeEnum: '', //动态类型id
      content: '', //动态内容
      trendsReasonId: '', //动态原因
      trendsTypeData: [], //动态类型
      trendsTypeData: [], //动态类型
      trendsList: [], //动态数据
      origanList: [], //操作轨迹
      activeName: "info",
      activeNames: ['1','2','3','4','5'],
      tableData: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick() { //切换主tab
      if (this.activeName == 'dongtai') {
        this.getTrendsList()
      }
    },
    getTrendsList () {
      this.$post(this.$api.postTrendsFinanceList, { //动态
          financeId: this.financeData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            data.forEach(el=>{
              el.name = el.createBy.slice(0,1)
            })
            this.trendsList = data
          }
        })
      this.$post(this.$api.postRecordFinancialList,{ //操作历史
          projectId: this.parames.contractId
        }).then(response => {
          if (response.data.succeed) {
            this.origanList = response.data.data
          }
        })
    },
    handleDownFile (row) { //附件下载
      window.location.href = this.$api.postContractDownloadContract+'?name=' + row.name + '&url=' + row.url
    },
    handleClose() { //关闭弹窗
      this.financeData.show = false;
    },
    changTrends (id) {
      let obj = {}
      obj = this.trendsData.find((item)=>{
        return item.id === id;//筛选出匹配数据
      });
      this.content = obj.trendsReasonName
    },
    handleFabu () { //发布动态内容
      if (!this.content) {
        this.$message.error('请输入动态内容！');
        return false
      }
      this.floading = true
      this.$post(this.$api.postTrendsFinanceAdd,{
        objectID: this.financeData.id,
        typeEnum: this.typeEnum,
        content: this.content,
        trendsReasonId: this.trendsReasonId
      }).then(response => {
        if (response.data.succeed) {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          this.content = ''
          this.trendsReasonId = ''
          setTimeout(() => {
            this.floading = false
            this.getTrendsList()
          }, 200);
        }
      })
    },
    handleDeleteUser (index,item) { //删除组内人员
      if (item.teamMemberId) {
        this.$post(this.$api.postOpportunityTeamMemberDel,{
          teamMemberId: item.teamMemberId
        }).then(response => {
          if (response.data.succeed) {
            this.$message({ type:'success',message: '删除成功'})
            this.parames.userIdList.splice(index,1)
          }
        })
      } else {
        this.parames.userIdList.splice(index,1)
      }
    },
    handleAddTeam () { //添加新成员
      this.teamData.show = true
    },
    selectUser (value) { //添加选择的成员
      let select = value //选中的数组
      let userIdList = []
      let origan = this.parames.userIdList //本身存在的数组
      select.forEach(el=>{
        let i = 0
        origan.forEach((bl,index)=>{
          if (el.userId == bl.userId) {
            i = 1
          }
        })
        if (i !== 1) {
          userIdList.push(el.userId)
        }
      })
      this.$post(this.$api.postOpportunityTeamMemberAdd,{
        teamId:  this.financeData.id,
        userIdList: userIdList
      }).then(response => {
        if (response.data.succeed) {
          this.render()
        }
      })
    },
    checkOpen (type) {
      this.financeData.show = true
      if (type == '1') { //是点击了修改保存按钮-需刷新列表数据
        setTimeout(() => {
          this.$emit('checkRender')
        }, 200);
      }
    },
    goBack () { //回退到上一个弹窗并关闭本身弹窗
      this.financeData.show = false
      this.$emit('handleOpen')
    },
    getSummaries(param) { //产品合计
        const { columns, data } = param;
        const sums = [];
        let values = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          // let values = data.map(item => Number(item[column.property]));

          if (column.property == 'unitPrice') {
            values = data.map(item => Number(item.unitPrice * item.count))
          }
          if (index == 4) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '.00';
          } else {
            sums[index] = '';
          }
        });
        return sums;
      },
    render () {
      this.loading = true
      this.$post(this.$api.postFinanceReceivableFind,{
        contractProductId: this.financeData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
      this.$post(this.$api.postTrendsReasonList).then(response => {
        if (response.data.succeed) {
          this.trendsData = response.data.data
        }
      })
    },
    handleEdit () { //修改合同-关闭自身弹窗
      this.dialogData.id = this.financeData.id
      this.dialogData.type = 'edit'
      this.dialogData.show = true
      this.handleClose()
    },
    handleFly () { //修改合同-作废合同
      this.$post(this.$api.postContactInvalid,{
        contractId: this.financeData.id
      }).then(response => {
        if (response.data.succeed) {
          this.render()
          this.$emit('checkRender')
        }
      })
    }
  },
  components: {
    // createdContractDialog
  },
  computed: { //计算属性
    changeDialog () {
      return this.financeData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.$utils.getEnumberation('postTrendsTrendsType','trendsTypeData',this) //动态枚举
          this.typeEnum = 'RECORD'
          this.render()
        } else {
          this.activeName = "info"
          this.activeNames = ['1','2','3','4','5']
          this.content = ''
          this.trendsReasonId = ''
        }
      }
    },
    deep: true
  }
};
</script>

<style>
.kaipiao-box{
  width: 100%;
  height: 80px;
  padding: 20px 0 20px 60px;
  position: relative;
  background: #d8bf99;
  color: #fff;
  font-size: 14px
}
.kaipiao-box-left{
  display: block;
  position: absolute;
  top: 30px;
  left: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.kaipiao-box-right{
  display: block;
  position: absolute;
  top: 30px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}
.kaipiao-box-bottom{
  border-bottom: rgba(216, 191, 153, 1) solid 2px;
  margin-top: 2px;
}
.kaipiao-xu:last-child{
  border-right: none;
}
.kaipiao-xu{
  border-right: #fff dashed 1px;
}
.kaipiao-xu .jine-top{
  margin-top: 5px;
  font-size: 16px;
}
</style>
